<template>
    <div id="item">
        <div class="show" :style="showCom">
              {{LR}}
        </div>
        <div class="form">
            <p class="form-Title"><slot name="title"></slot></p>
            <slot></slot>
            <p class="button"><button @click="click"><slot name="bottom-name">Login</slot></button></p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login-view",
        data(){
            return {
                 'show':0,
                'LR':''
            }
        },
        props:{
           type:{
               type:String,
               default:"默认值"
           },
           name:{
               type:String,
               default: "默认值"
           },
            password:{
                type:String,
                default:"默认值"
            },
            phone:{
                type:String,
                default:"默认值"
            },
            RegisterPassword:{
                type:String,
                default:"默认值"
            },
            ConfirmPassword:{
                type:String,
                default:"默认值"
            },
            // code:{
            //     type:String,
            //     default:"默认值"
            // }
        },
        computed:{
             showCom(){
                   return this.show == 0 ? {top:'-25px'} : {top:'0px'}
             }
        },
        methods:{
            click(){
                var request = this.myCode();
                var config={}
                if(this.type == 'login'){
                    if(!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.name))){
                        alert("邮箱格式有误，请重填");
                        return false;
                    }
                    if(this.password.length >10 || this.password.length<6){
                        alert("密码格式不正确")
                        return false;
                    }
                    config.method='get';
                    config.url='/login'
                    config.params={
                         'name':this.name,
                         'password':this.password
                    }
                }else if (this.type == 'register'){
                    if(!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.phone))){
                        alert("邮箱格式错误，请重填");
                        return false;
                    }
                    if(this.RegisterPassword.length >10 || this.RegisterPassword.length<6){
                        alert("密码格式不正确")
                        return false;
                    }
                    if( !(this.RegisterPassword == this.ConfirmPassword) ){
                           alert('密码不相等');
                           return false;
                    }
                    // if(!(this.code)){
                    //      alert('请输入验证码');
                    //      return false;
                    // }
                    config.method='get';
                    config.url='/register'
                    config.params={
                        'phone':this.phone,
                        'password':this.RegisterPassword,
                        // 'code':this.code
                    }
                }

                request(config).then( res =>{
                   if(res.data.status == 200){
                          this.LR='验证已发送,快去验证吧！';
                          this.show=1;
                      setTimeout(()=>{
                       this.$router.push({'name':'Login'})
                     },2000);
                          return;
                   }else if(res.data.status == 201){
                       this.LR='登录成功';
                   }else{
                       return false;
                   }
                   localStorage.setItem('API',res.data.api_token)

                   this.show=1;
                    setTimeout(()=>{
                      this.$store.commit('isLoginChange',true)
                      this.$router.go(-1);
                      this.$router.beforeEach((to,from,next) =>{
                          if(to.name.indexOf('Register') != -1 && localStorage.getItem('API')){
                                 this.$router.push({'name':'Home'})
                            }else if(to.name.indexOf('info') != -1){
                               this.$router.push({'name':'Home'})
                            }
                               next();
                       })
                    },2000);
                });
            }
        }

    }
</script>

<style lang="scss" scoped>
    #item{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: start;
        background: #f5f5f5;
        img{
            width: 100%;
        }
        height: 100vh;

      background: url("../../public/img/485f3877fe06efbb26b9c7cf9def656d.jpg");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50%;
      background-size: cover;
      overflow: hidden;

    }
    .form{
        border-radius: 5px;
        overflow: hidden;
        background: white;
        margin-top: 150px;
        margin-bottom: 200px;
        position: absolute;
    .input{
        display: flex;
        justify-content: center;
        margin-top: 20px;
    input{
        width: 70%;
        height: 30px;
        border: #cecfd1 1px solid;
        padding-left: 10px;
    }
    }
    .form-Title{
        padding: 10px 110px 10px 110px;
        background:#f5f5f5;
        border-bottom:#d8d8d8 1px solid;
        color: black;
        font-family: Arial;
    }
        .verification{
            margin-top: 20px;
            display: flex;
            justify-content: center;
            input{
                width: 43%;
                height: 30px;
                border: #cecfd1 1px solid;
                padding-left: 10px;
                box-sizing: border-box;
                border-right:0px;
            }
            button{
                width: 31%;
                border: none;
                color: white;
                cursor: pointer;
            }
        }
    .button{
        display: flex;
        justify-content: center;
    button{
        width: 75%;
        margin-top: 30px;
        border: 0px;
        margin-bottom: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 12px;
        cursor:pointer;
    }
    }
    }
    .show{
        background: #ffffff;
        width: 100%;
        position: absolute;
        text-align: center;
        transition: 1s;
    }

</style>